import React, { useState } from 'react';
import { Card, Button, Space, Alert, App as AntdApp, Spin, Typography, Divider, Tag } from 'antd';
import { SettingOutlined, SecurityScanOutlined, CheckCircleOutlined, ExclamationCircleOutlined, ReloadOutlined } from '@ant-design/icons';
import { setupMenuData } from '@/utils/setupMenuData';
import { setupAdminPermissionsWithMessage } from '@/utils/setupAdminPermissions';
import { useUserStore } from '@/store/user';

const { Title, Paragraph } = Typography;

const SetupAdminPermissionsPage: React.FC = () => {
  const { modal } = AntdApp.useApp();
  const { refreshPermissions } = useUserStore();
  const [loading, setLoading] = useState(false);
  const [menuLoading, setMenuLoading] = useState(false);
  const [permissionLoading, setPermissionLoading] = useState(false);
  const [refreshLoading, setRefreshLoading] = useState(false);

  const handleSetupMenus = async () => {
    setMenuLoading(true);
    try {
      modal.confirm({
        title: '确认设置菜单数据',
        content: '这将创建或更新菜单数据为动态路由所需的格式，是否继续？',
        onOk: async () => {
          await setupMenuData();
          modal.success({
            title: '设置成功',
            content: '菜单数据设置成功！',
          });
        },
      });
    } catch (error) {
      modal.error({
        title: '设置失败',
        content: '菜单数据设置失败：' + (error as Error).message,
      });
    } finally {
      setMenuLoading(false);
    }
  };

  const handleSetupPermissions = async () => {
    setPermissionLoading(true);
    try {
      modal.confirm({
        title: '确认分配 Admin 权限',
        content: '这将为 admin 角色分配所有系统权限，是否继续？',
        onOk: async () => {
          const success = await setupAdminPermissionsWithMessage();
          if (success) {
            modal.success({
              title: '分配成功',
              content: 'Admin 角色权限分配成功！现在 admin 角色拥有所有系统权限。',
            });
          }
        },
      });
    } catch (error) {
      modal.error({
        title: '分配失败',
        content: 'Admin 权限分配失败：' + (error as Error).message,
      });
    } finally {
      setPermissionLoading(false);
    }
  };

  const handleSetupAll = async () => {
    setLoading(true);
    try {
      modal.confirm({
        title: '确认完整初始化',
        content: '这将执行完整的权限初始化：1. 设置菜单数据 2. 为 admin 角色分配所有权限。是否继续？',
        onOk: async () => {
          // 第一步：设置菜单数据
          await setupMenuData();

          // 第二步：为 admin 分配权限
          const success = await setupAdminPermissionsWithMessage();

          if (success) {
            modal.success({
              title: '初始化完成',
              content: '权限系统初始化完成！现在您可以正常使用动态路由和权限控制功能。',
            });
          }
        },
      });
    } catch (error) {
      modal.error({
        title: '初始化失败',
        content: '权限系统初始化失败：' + (error as Error).message,
      });
    } finally {
      setLoading(false);
    }
  };

  const handleRefreshPermissions = async () => {
    setRefreshLoading(true);
    try {
      await refreshPermissions();
      modal.success({
        title: '刷新成功',
        content: '用户权限数据已刷新！',
      });
    } catch (error) {
      modal.error({
        title: '刷新失败',
        content: '权限数据刷新失败：' + (error as Error).message,
      });
    } finally {
      setRefreshLoading(false);
    }
  };

  return (
    <div style={{ padding: 24 }}>
      <Card
        title="Admin 权限管理"
        extra={<SecurityScanOutlined />}
        style={{ maxWidth: 1000, margin: '0 auto' }}
      >
        <Space direction="vertical" style={{ width: '100%' }} size="large">
          <div>
            <Title level={3}>
              <SecurityScanOutlined /> 权限系统管理
            </Title>
            <Paragraph>
              此页面用于初始化和管理系统的权限体系。包括菜单数据的创建和 Admin 角色的权限分配。
            </Paragraph>
          </div>

          <Alert
            message="权限系统说明"
            description={
              <div>
                <p><strong>菜单类型：</strong></p>
                <ul>
                  <li><Tag color="blue">M - 目录</Tag> 系统模块的顶级目录</li>
                  <li><Tag color="green">C - 菜单</Tag> 具体的功能页面</li>
                  <li><Tag color="orange">F - 权限</Tag> 按钮级别的操作权限</li>
                </ul>
                <p><strong>Admin 角色：</strong>拥有所有系统权限，包括菜单访问和操作权限。</p>
              </div>
            }
            type="info"
            showIcon
          />

          <Divider />

          <div>
            <Title level={4}>
              <SettingOutlined /> 初始化步骤
            </Title>
            <Space direction="vertical" style={{ width: '100%' }} size="middle">
              <div>
                <h4>步骤 1: 设置菜单数据</h4>
                <Paragraph>
                  创建系统管理、数据管理等模块的菜单结构，包括页面菜单和操作权限。
                </Paragraph>
                <Button
                  type="primary"
                  icon={<SettingOutlined />}
                  onClick={handleSetupMenus}
                  loading={menuLoading}
                  block
                >
                  {menuLoading ? '正在设置菜单数据...' : '设置菜单数据'}
                </Button>
              </div>

              <div>
                <h4>步骤 2: 分配 Admin 权限</h4>
                <Paragraph>
                  为 admin 角色分配所有系统的菜单和操作权限。
                </Paragraph>
                <Button
                  type="primary"
                  icon={<SecurityScanOutlined />}
                  onClick={handleSetupPermissions}
                  loading={permissionLoading}
                  block
                >
                  {permissionLoading ? '正在分配权限...' : '分配 Admin 权限'}
                </Button>
              </div>
            </Space>
          </div>

          <Divider />

          <div>
            <Title level={4}>
              <CheckCircleOutlined /> 一键初始化
            </Title>
            <Paragraph>
              如果您是第一次使用系统，建议使用一键初始化功能，自动完成所有权限设置。
            </Paragraph>
            <Button
              type="primary"
              size="large"
              icon={<CheckCircleOutlined />}
              onClick={handleSetupAll}
              loading={loading}
              block
              style={{ height: 50, fontSize: 16 }}
            >
              {loading ? <Spin size="small" /> : '一键完整初始化'}
            </Button>
          </div>

          <div>
            <Title level={4}>
              <ReloadOutlined /> 权限管理
            </Title>
            <Paragraph>
              如果权限发生变化，可以手动刷新权限缓存数据。
            </Paragraph>
            <Button
              type="default"
              icon={<ReloadOutlined />}
              onClick={handleRefreshPermissions}
              loading={refreshLoading}
              block
            >
              {refreshLoading ? '正在刷新权限...' : '刷新权限缓存'}
            </Button>
          </div>

          <Alert
            message="注意事项"
            description={
              <div>
                <p>• 请确保后端服务正常运行</p>
                <p>• 初始化操作会创建或更新菜单数据，请谨慎操作</p>
                <p>• 完成初始化后，请重新登录以刷新权限缓存</p>
                <p>• 如果遇到问题，请查看浏览器控制台的错误信息</p>
                <p>• 权限数据现在会自动缓存，减少接口调用</p>
              </div>
            }
            type="warning"
            showIcon
          />
        </Space>
      </Card>
    </div>
  );
};

export default SetupAdminPermissionsPage;